<template>
  <div id="app">
    <div v-if="loading">加载中...</div>
    <div v-else>
      <h1>题库练习</h1>
      <div>
        <p>
          <strong>题目类型：</strong>
          {{ getQuestionType(question.questionType) }}
        </p>
        <p>
          <strong>题目：</strong>
          {{ question.textContext }}
        </p>
        <div>
          <p>
            <strong>选项：</strong>
          </p>
          <ul>
            <li
              v-for="(option, index) in question.arrOptions"
              :key="index"
              :class="getOptionClass(index)"
              @click="selectOption(index)"
            >{{ String.fromCharCode(65 + index) }}. {{ option }}</li>
          </ul>
        </div>
        <div v-if="userSelected !== null">
          <p>
            你选择了：
            {{ getOptionText(userSelected) }}
            <span
              :class="{ correct: isCorrectAnswer(), incorrect: !isCorrectAnswer() }"
            >({{ isCorrectAnswer() ? "正确" : "错误" }})</span>
          </p>
          <p>正确答案是：{{ getOptionText(question.correct) }}</p>
        </div>
      </div>
      <button @click="fetchQuestion">下一题</button>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      loading: true,
      question: {}, // 当前题目
      userSelected: null // 用户选择的答案
    };
  },
  methods: {
    // 请求新的题目
    async fetchQuestion() {
      this.loading = true;
      this.userSelected = null; // 重置选择
      try {
        // 模拟请求 API
        const response = await new Promise(resolve => {
          setTimeout(() => {
            resolve({
              questionType: 1,
              textContext: "Vue 是一个什么框架？",
              arrOptions: ["前端框架", "后端框架", "数据库框架", "测试框架"],
              correct: 0
            });
          }, 1000);
        });
        this.question = response;
      } catch (error) {
        console.error("加载题目失败：", error);
      } finally {
        this.loading = false;
      }
    },
    // 用户选择答案
    selectOption(index) {
      if (this.userSelected === null) {
        this.userSelected = index; // 记录用户选择
      }
    },
    // 判断是否正确答案
    isCorrectAnswer() {
      return this.userSelected === this.question.correct;
    },
    // 获取题目类型
    getQuestionType(type) {
      const types = { 1: "选择题", 2: "判断题" };
      return types[type] || "未知类型";
    },
    // 根据索引获取选项文本
    getOptionText(index) {
      return `${String.fromCharCode(65 + index)}: ${
        this.question.arrOptions[index]
      }`;
    },
    // 获取选项样式
    getOptionClass(index) {
      if (this.userSelected === null) return "";
      if (index === this.question.correct) return "correct-option";
      if (index === this.userSelected) return "incorrect-option";
      return "";
    }
  },
  mounted() {
    this.fetchQuestion(); // 初始化加载题目
  }
};
</script>
  
  <style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  padding: 8px;
  border: 1px solid #ddd;
  margin: 4px 0;
  cursor: pointer;
}
li:hover {
  background-color: #f4f4f4;
}
.correct-option {
  background-color: #d4edda;
  color: #155724;
}
.incorrect-option {
  background-color: #f8d7da;
  color: #721c24;
}
.correct {
  color: green;
}
.incorrect {
  color: red;
}
</style>